<!--审核端首页-->
<template>
  <div class="check-dashboard">
    <div class="top-part">
      <div class="title">企业管理服务平台</div>
      <div class="menu-list">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item, index) in menuList"
            :key="index"
            :label="item.label"
            :name="index + ''"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <div class="right">
        <el-input type="text" v-model="unitName" placeholder="输入搜索关键词">
          <svg-icon
            slot="suffix"
            icon-class="search"
            class="search-icon"
            @click="gotoEnterprise(unitName)"
          />
        </el-input>
        <el-dropdown>
          <div class="user">
            <img :src="avatar" alt />
            <span>管理员</span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logout">登出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="content-part one">
      <div class="box left">
        <div class="title">日常工作情况概览</div>
        <div class="text-box">
          <div
            class="text-item"
            @click="gotoEnterprise(false)"
            style="cursor: pointer"
          >
            <div class="num">{{ ngData }}</div>
            <div class="name">纳管单位</div>
          </div>
          <div class="shu"></div>
          <div class="text-item">
            <div class="num">{{ teskData.total }}</div>
            <div class="name">任务数</div>
          </div>
          <div class="text-item">
            <div class="num">
              {{ teskData.completeRate }}
              <span class="unit">%</span>
            </div>
            <div class="name">任务完成率</div>
          </div>
          <div class="text-item">
            <div class="num">{{ teskData.unCompleteCount }}</div>
            <div class="name">临期任务</div>
          </div>
          <div class="text-item">
            <div class="num">{{ teskData.overtimeCount }}</div>
            <div class="name">超时任务</div>
          </div>
        </div>
      </div>
      <div class="box right">
        <div class="title">支撑单位任务完成率排名</div>
        <div class="rank-box">
          <div
            class="rank-item"
            v-for="(item, index) in supportUnitRateList"
            :key="item"
          >
            <div class="hexagon" :class="`color${index}`">{{ index + 1 }}</div>
            <div class="text">
              <span class="name">{{ item.name }}：</span>
              {{ item.rate }}
              <span class="unit">%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="select-part">
      <div>当前展示数据</div>
      <el-select v-model="supportUnitId" @change="changeSupportUnit">
        <el-option label="全区" value></el-option>
        <el-option
          v-for="(item, index) in supportUnitDict"
          :key="index"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div class="content-part two">
      <div class="box left">
        <div class="title">资产预览</div>
        <div class="content-box">
          <div class="num-list">
            <div class="sp-item">
              <svg-icon class-name="svg-icon" icon-class="qiye" />
              <div class="name">企业备案率</div>
              <div class="num">{{ recordRate }}%</div>
            </div>
            <div class="shu"></div>
            <div
              class="num-item"
              v-for="(item, index) in oneNumList"
              :key="index"
            >
              <div class="icon-box">
                <svg-icon class-name="svg-icon" :icon-class="item.iconClass" />
                <div class="right">
                  <div class="name">{{ item.name }}</div>
                  <div class="num" @click="gotoProperty(item.path)">
                    {{ item.total }}
                  </div>
                </div>
              </div>
              <div class="num-box">
                <span class="name">备案率：</span>
                <span
                  class="num"
                  @click="gotoProperty(item.hasPoliceOrgCodePath)"
                >
                  {{ item.recordRate }}
                  <span class="unit">%</span>
                </span>
              </div>
              <div class="num-box">
                <span class="name">未备案：</span>
                <span
                  class="num"
                  @click="gotoProperty(item.unHasPoliceOrgCodePath)"
                  >{{ item.unRecordCount }}</span
                >
              </div>
            </div>
          </div>
          <!-- <div class="bar-list">
            <div class="bar-item" v-for="(item, index) in intelligenceList" :key="index">
              <div class="name">小程序情报</div>
              <div class="bar">
                <div class="bar-inner" :style="`width: ${item.rate}%`"></div>
                <div class="bar-num">{{ item.value }}</div>
              </div>
            </div>
          </div>-->
        </div>
      </div>
      <div class="box right">
        <div class="title">任务完成分析</div>
        <div class="bar-list">
          <div
            class="bar-item"
            :style="`width: ${100 / checkTaskTypeRateList.length}%;`"
            v-for="(item, index) in checkTaskTypeRateList"
            :key="index"
          >
            <div class="bar">
              <div class="bar-num">
                {{ item.rate }}
                <span class="unit">%</span>
              </div>
              <div class="bar-inner" :style="`height: ${item.rate}%`"></div>
            </div>
            <div class="heng"></div>
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  manageGetEnterpriseStat,
  manageGetCheckTaskStat,
  manageGetSupportUnitRateStat,
  manageGetDomainStat,
  manageGetAppStat,
  manageGetAppletStat,
  manageGetSystemStat,
  manageGetSystemTestStat,
  manageGetEnterpriseRecordStat,
  manageGetIntelligenceStat,
  manageGetCheckTaskTypeRateStat
} from '@/api/dashboard/index'
export default {
  data() {
    return {
      activeName: '',
      unitName: '',
      ngData: 0, // 纳管单位
      recordRate: 0, // 备案率
      supportUnitId: '',
      oneNumList: [
        {
          total: 0,
          recordRate: 0,
          unRecordCount: 0,
          iconClass: 'yuming',
          name: '域名',
          path: '/property/index?tabName=1',
          hasPoliceOrgCodePath: '/property/index?tabName=1&hasPoliceOrgCode=1',
          unHasPoliceOrgCodePath: '/property/index?tabName=1&hasPoliceOrgCode=0'
        },
        {
          total: 0,
          recordRate: 0,
          unRecordCount: 0,
          iconClass: 'app',
          name: 'APP',
          path: '/property/index?tabName=4',
          hasPoliceOrgCodePath: '/property/index?tabName=4&hasPoliceOrgCode=1',
          unHasPoliceOrgCodePath: '/property/index?tabName=4&hasPoliceOrgCode=0'
        },
        {
          total: 0,
          recordRate: 0,
          unRecordCount: 0,
          iconClass: 'xiaochengxu',
          name: '小程序',
          path: '/property/index?tabName=5',
          hasPoliceOrgCodePath: '/property/index?tabName=5&hasPoliceOrgCode=1',
          unHasPoliceOrgCodePath: '/property/index?tabName=5&hasPoliceOrgCode=0'
        },
        {
          total: 0,
          recordRate: 0,
          unRecordCount: 0,
          iconClass: 'xinxixitong',
          name: '信息系统',
          path: '/property/index?tabName=2',
          hasPoliceOrgCodePath: '/property/index?tabName=2&hasPoliceOrgCode=1',
          unHasPoliceOrgCodePath: '/property/index?tabName=2&hasPoliceOrgCode=0'
        },
        {
          total: 0,
          recordRate: 0,
          unRecordCount: 0,
          iconClass: 'xitongpinggu',
          name: '系统评估',
          path: '/property/index?tabName=2',
          hasPoliceOrgCodePath: '/property/index?tabName=2&hasPoliceOrgCode=1',
          unHasPoliceOrgCodePath: '/property/index?tabName=2&hasPoliceOrgCode=0'
        }
      ],
      teskData: {
        total: 0,
        completeRate: 0,
        unCompleteCount: 0,
        overtimeCount: 0
      },
      supportUnitRateList: [],
      intelligenceList: [],
      checkTaskTypeRateList: []
    }
  },
  computed: {
    avatar() {
      return this.$store.getters.avatar
    },
    menuList() {
      let list = [
        { label: '域名', path: '/property/index?tabName=1' },
        { label: 'APP', path: '/property/index?tabName=4' },
        { label: '小程序', path: '/property/index?tabName=5' },
        { label: '信息系统', path: '/property/index?tabName=2' },
        { label: '审核列表', path: '/check/index' }
      ]
      return list
    },

    supportUnitDict() {
      const dict = this.$store.getters.dict
      const list = []
      for (let value in dict.supportUnit) {
        list.push({
          label: dict.supportUnit[value],
          value
        })
      }
      return list
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    changeSupportUnit() {
      this.getDomainStat()
      this.getAppStat()
      this.getAppletStat()
      this.getSystemStat()
      this.getSystemTestStat()
      this.getEnterpriseRecordStat()
      this.getCheckTaskTypeRateStat()
    },
    init() {
      this.getEnterpriseStat()
      this.getCheckTaskStat()
      this.getSupportUnitRateStat()
      this.getDomainStat()
      this.getAppStat()
      this.getAppletStat()
      this.getSystemStat()
      this.getSystemTestStat()
      this.getEnterpriseRecordStat()
      this.getIntelligenceStat()
      this.getCheckTaskTypeRateStat()
    },
    // 纳管单位统计
    getEnterpriseStat() {
      manageGetEnterpriseStat({}).then((res) => {
        this.ngData = res.data
      })
    },
    // 任务概览数据
    getCheckTaskStat() {
      manageGetCheckTaskStat({}).then((res) => {
        this.teskData = {
          ...res.data,
          completeRate: res.data.completeRate * 100
        }
      })
    },
    // 支撑单位任务完成率排名
    getSupportUnitRateStat() {
      manageGetSupportUnitRateStat({}).then((res) => {
        for (const key in res.data) {
          this.supportUnitRateList.push({
            rate: res.data[key] * 100,
            name: this.supportUnitDict.find((item) => item.value === key).label
          })
        }
      })
    },
    // 域名数据
    getDomainStat() {
      manageGetDomainStat({
        supportUnitCode: this.supportUnitId
      }).then((res) => {
        this.$set(this.oneNumList[0], 'total', res.data.total)
        this.$set(
          this.oneNumList[0],
          'recordRate',
          Math.round(res.data.recordRate * 100)
        )
        this.$set(this.oneNumList[0], 'unRecordCount', res.data.unRecordCount)
      })
    },
    // APP数据
    getAppStat() {
      manageGetAppStat({
        supportUnitCode: this.supportUnitId
      }).then((res) => {
        this.$set(this.oneNumList[1], 'total', res.data.total)
        this.$set(
          this.oneNumList[1],
          'recordRate',
          Math.round(res.data.recordRate * 100)
        )
        this.$set(this.oneNumList[1], 'unRecordCount', res.data.unRecordCount)
      })
    },
    // 小程序数据
    getAppletStat() {
      manageGetAppletStat({
        supportUnitCode: this.supportUnitId
      }).then((res) => {
        this.$set(this.oneNumList[2], 'total', res.data.total)
        this.$set(
          this.oneNumList[2],
          'recordRate',
          Math.round(res.data.recordRate * 100)
        )
        this.$set(this.oneNumList[2], 'unRecordCount', res.data.unRecordCount)
      })
    },
    // 信息系统数据
    getSystemStat() {
      manageGetSystemStat({
        supportUnitCode: this.supportUnitId
      }).then((res) => {
        this.$set(this.oneNumList[3], 'total', res.data.total)
        this.$set(
          this.oneNumList[3],
          'recordRate',
          Math.round(res.data.recordRate * 100)
        )
        this.$set(this.oneNumList[3], 'unRecordCount', res.data.unRecordCount)
      })
    },
    // 系统评估数据
    getSystemTestStat() {
      manageGetSystemTestStat({
        supportUnitCode: this.supportUnitId
      }).then((res) => {
        this.$set(this.oneNumList[4], 'total', res.data.total)
        this.$set(
          this.oneNumList[4],
          'recordRate',
          Math.round(res.data.evalRate * 100)
        )
        this.$set(this.oneNumList[4], 'unRecordCount', res.data.unEvalCount)
      })
    },
    // 首页-企业备案统计
    getEnterpriseRecordStat() {
      manageGetEnterpriseRecordStat({
        supportUnitCode: this.supportUnitId
      }).then((res) => {
        this.recordRate = Math.round(res.data.recordRate * 100)
      })
    },

    // 情报数量统计
    getIntelligenceStat() {
      manageGetIntelligenceStat({}).then((res) => {
        // 获取最大值
        const max = Math.max.apply(null, [
          res.data.domainIntelligenceCount,
          res.data.appIntelligenceCount,
          res.data.systemIntelligenceCount,
          res.data.appletIntelligenceCount
        ])
        this.intelligenceList = [
          {
            name: '域名情报',
            value: res.data.domainIntelligenceCount,
            rate: (res.data.domainIntelligenceCount / max) * 100
          },
          {
            name: 'APP情报',
            value: res.data.appIntelligenceCount,
            rate: (res.data.appIntelligenceCount / max) * 100
          },
          {
            name: '系统情报',
            value: res.data.systemIntelligenceCount,
            rate: (res.data.systemIntelligenceCount / max) * 100
          },
          {
            name: '小程序情报',
            value: res.data.appletIntelligenceCount,
            rate: (res.data.appletIntelligenceCount / max) * 100
          }
        ]
      })
    },

    nameReplace(value) {
      let name = ''
      switch (value) {
        case '00':
          name = '汇总任务'
          break
        case '01':
          name = '交互式任务'
          break
        case '02':
          name = '整改任务'
          break
        case '03':
          name = '备案任务'
          break
        case '04':
          name = '常规任务'
          break
      }
      return name
    },
    // 任务完成分析
    getCheckTaskTypeRateStat() {
      this.checkTaskTypeRateList = []
      manageGetCheckTaskTypeRateStat({
        supportUnitCode: this.supportUnitId
      }).then((res) => {
        for (const key in res.data) {
          this.checkTaskTypeRateList.push({
            name: this.nameReplace(key),
            rate: res.data[key] * 100
          })
        }
      })
    },

    handleClick(tab, event) {
      const row = this.menuList[this.activeName]
      if (row.path === '/check/index') {
        let routeData = this.$router.resolve({
          path: row.path
        })
        window.open(routeData.href, '_blank')
      } else if (row.path) {
        this.$router.push({ path: row.path })
      }
    },
    gotoProperty(path) {
      if (path) {
        this.$router.push({ path })
      }
    },
    gotoEnterprise(unitName) {
      let path = '/enterprise/index'
      if (unitName) {
        path = '/enterprise/index?unitName=' + unitName
      }
      this.$router.push({ path })
    },
    async logout() {
      this.$confirm('确定退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$store.dispatch('LogOut').then(() => {
            location.href = '/login'
          })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.check-dashboard {
  padding: 0.38rem 1.38rem 0;

  .top-part {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.9rem;

    .title {
      font-size: 0.53rem;
    }
    .menu-list {
      ::v-deep {
        .el-tabs__header {
          margin-bottom: 0;
        }
        .el-tabs__active-bar {
          background: transparent;
        }
        .el-tabs__nav-wrap::after {
          display: none;
        }
        .el-tabs__item {
          color: rgba(0, 8, 34, 0.6);
          font-size: 0.3rem;
          // &.is-active {
          //   color: #000822;
          // }
        }
      }
    }
    .right {
      display: flex;
      .el-input {
        width: 3.48rem;
        height: 0.6rem;
        font-size: 0.23rem;
        ::v-deep .el-input__inner {
          height: 0.6rem;
        }
        .search-icon {
          height: 0.6rem;
          font-size: 0.25rem;
          margin-right: 0.25rem;
        }
      }
      .user {
        display: flex;
        align-items: center;
        margin-left: 0.14rem;
        width: 1.5rem;
        height: 0.6rem;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 0px 0.07rem 1.2rem 0.6rem rgba(0, 0, 0, 0.05);
        border-radius: 0.04rem;
        font-size: 0.23rem;
        color: #000822;
        padding-left: 0.1rem;
        box-sizing: border-box;
        img {
          width: 0.45rem;
          height: 0.45rem;
          border-radius: 0.07rem;
          margin-right: 0.11rem;
        }
      }
    }
  }

  .select-part {
    margin: 0.6rem 0 0.3rem;
    font-size: 0.3rem;
    color: rgba(0, 8, 34, 0.8);
    display: flex;
    align-items: center;
    ::v-deep {
      .el-select {
        width: 2.25rem;
        .el-input__inner {
          font-size: 0.38rem;
          color: #1c4088;
          border: none;
          background: transparent;
        }
        .el-select__caret {
          color: #1c4088;
          font-size: 0.28rem;
        }
      }
    }
  }

  .content-part {
    display: flex;
    justify-content: space-between;

    &.one {
      height: 3.75rem;

      .box.left {
        width: 51.25%;

        .text-box {
          padding: 0 0.38rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          text-align: center;
          margin-top: 0.93rem;

          .shu {
            width: 0.8px;
            height: 1.09rem;
            background: rgba(0, 8, 34, 0.3);
          }

          .text-item {
            .num {
              font-size: 0.45rem;
              color: #000822;

              .unit {
                font-size: 0.3rem;
              }
            }

            .name {
              margin-top: 0.17rem;
              font-size: 0.26rem;
              color: rgba(0, 8, 34, 0.8);
            }
          }
        }
      }

      .box.right {
        width: calc(48.75% - 0.3rem);

        .rank-box {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          margin-top: 0.64rem;
          padding: 0 0.1rem;
          height: 1.88rem;

          .rank-item {
            display: flex;
            align-items: top;
            height: 30%;

            .hexagon {
              width: 0.3rem;
              height: 0.3rem;
              background: rgba(0, 8, 34, 0.05);
              display: flex;
              align-items: center;
              justify-content: center;
              clip-path: polygon(
                50% 0%,
                100% 25%,
                100% 75%,
                50% 100%,
                0% 75%,
                0% 25%
              );
              font-size: 0.19rem;
              color: #000822;
              line-height: 0.3rem;
              text-align: center;

              &.color0 {
                background: #e70819;
                color: #fff;
              }

              &.color1 {
                background: #fe9f01;
                color: #fff;
              }

              &.color2 {
                background: #1c4088;
                color: #fff;
              }
            }

            .text {
              font-size: 0.26rem;
              color: #000822;
              margin-left: 0.15rem;

              .name {
                color: rgba(0, 8, 34, 0.8);
                margin-right: 0.15rem;
              }

              .unit {
                font-size: 0.19rem;
              }
            }
          }
        }
      }
    }

    &.two {
      height: 4.53rem;

      .box.left {
        width: 71.32%;

        .content-box {
          display: flex;
          justify-content: space-between;
          padding: 0 0.17rem;
          margin-top: 0.7rem;

          .num-list {
            // width: 71.4%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            .sp-item {
              width: 1.3rem;
              .svg-icon {
                font-size: 0.45rem;
              }
              .name {
                margin: 0.15rem 0;
                font-size: 0.26rem;
                color: rgba(0, 8, 34, 0.8);
              }
              .num {
                font-size: 0.38rem;
                color: #000822;
              }
            }
            .shu {
              width: 0.8px;
              height: 1.88rem;
              background: rgba(0, 8, 34, 0.3);
            }
            .num-item {
              width: 1.73rem;

              .icon-box {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-bottom: 0.3rem;

                .svg-icon {
                  font-size: 0.45rem;
                  // margin-top: .15rem;
                }

                .right {
                  font-size: 0.26rem;
                  color: rgba(0, 8, 34, 0.8);
                  text-align: right;

                  .num {
                    font-size: 0.38rem;
                    color: #000822;
                    margin-top: 0.07rem;
                  }
                }
              }

              .num-box {
                width: 100%;
                display: flex;
                justify-content: space-between;
                font-size: 0.23rem;
                color: rgba(0, 8, 34, 0.6);
                margin-top: 0.11rem;

                .num {
                  cursor: pointer;
                  font-size: 0.26rem;
                  color: #000822;
                  .unit {
                    font-size: 0.19rem;
                  }
                }
              }
            }
          }

          .bar-list {
            margin-left: 0.94rem;
            flex: 1;

            .bar-item {
              width: 100%;
              display: flex;
              align-items: center;
              margin-bottom: 0.21rem;

              .name {
                width: 1.15rem;
                font-size: 0.23rem;
                color: rgba(0, 8, 34, 0.8);
                text-align: right;
                margin-right: 0.15rem;
              }

              .bar {
                flex: 1;
                display: flex;
                align-items: center;

                .bar-inner {
                  height: 0.07rem;
                  background: #1c4088;
                  margin-right: 0.14rem;
                }

                .bar-num {
                  font-size: 0.26rem;
                  color: #000822;
                }
              }
            }
          }
        }
      }

      .box.right {
        width: calc(28.68% - 0.3rem);

        .bar-list {
          padding: 0 0.1rem;
          margin-top: 0.51rem;
          display: flex;
          .bar-item {
            text-align: center;

            .bar {
              height: 1.88rem;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: flex-end;

              .bar-num {
                margin-bottom: 0.07rem;
                font-size: 0.23rem;
                color: #000822;

                .unit {
                  font-size: 0.15rem;
                }
              }

              .bar-inner {
                width: 0.07rem;
                background: #1c4088;
                border-radius: 0.8px;
              }
            }

            .heng {
              width: 100%;
              height: 0.8px;
              background: rgba(0, 8, 34, 0.3);
            }

            .name {
              font-size: 0.23rem;
              color: rgba(0, 8, 34, 0.8);
              margin-top: 0.1rem;
            }
          }
        }
      }
    }

    .box {
      padding: 0.45rem 0.38rem;
      background: #fff;
      border-radius: 0.07rem;
      box-shadow: 0px 0.07rem 1.2rem 0.6rem rgba(0, 0, 0, 0.05);

      .title {
        font-size: 0.38rem;
        color: #000822;
        display: flex;
        align-items: center;

        &::before {
          content: '';
          display: block;
          width: 0.04rem;
          height: 0.3rem;
          background: #1c4088;
          margin-right: 0.15rem;
        }
      }
    }
  }
}
</style>